<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
</head>
<body>

<div id="app">
    <p v-text="name"></p>
    <!--<a href="3" v-text="age"></a>-->
</div>

<script>
    let data = {
        name: '李云龙',
        age: 18
    }
    // 把data中的属性变成响应式的
    Object.keys(data).forEach((key) => {
        defineReactive(data, key, data[key])
    })
    function defineReactive(data, key, value) {
        // 进行转换操作
        Object.defineProperty(data, key, {
            get() {
                console.log('您访问了属性', key)
                return value
            },
            set(newValue) {
                // set函数的执行 不会自动判断俩次修改的值是否相等
                // 显然如果相等 不应该执行变化的逻辑
                if (newValue === value) {
                    return
                }
                console.log('您修改了属性', key)
                value = newValue
                // 这里我们把最新的值 反映到视图中  这里是关键的位置
                // 核心：操作dom  就是通过操作dom api 把最新的值设置上去
                compile()
            }
        })
    }
    function compile () {
        let app = document.getElementById('app')
        let childNodes =  app.childNodes
        console.log(childNodes)
        // console.log(childNodes)
        childNodes.forEach ((node) => {
            // console.log(node.nodeType)
            if (node.nodeType === 1) {
                // console.log(node)
                // 拿到所有的标签属性
                const attrs = node.attributes
                Array.from(attrs).forEach(attr =>{
                    console.log("attr", attr)
                    const nodeName = attr.nodeName
                    const nodeValue = attr.nodeValue
                    // nodeName  -> v-text  就是我们需要查找的标识
                    // nodeValue -> name    data中对应数据的key
                    console.log("nodeName =", nodeName,",nodeValue =", nodeValue)
                    // 把data中的数据 放到满足标识的dom上
                    if (nodeName === 'v-text') {
                        console.log('设置值', node)
                        node.innerText = data[nodeValue]
                    }
                })
            }
        })
    }
    compile()
</script>
</body>
</html>
